<template>
    <div>
        <el-form style="padding: 20px;padding-bottom: 0;" ref="form" :rules="rules" :model="docForm" label-width="130px">
            <el-form-item label="名称" prop="name">
                <el-input style="width: 520px;" v-model="docForm.name"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="content">
                <el-input style="width: 520px;" type="textarea" v-model="docForm.content"></el-input>
            </el-form-item>
            <el-form-item label="附件">
                <div style="display: flex;flex-direction: column;">
                    <span v-for="item in docForm.docFilePath" v-if="docForm.docFilePath.length > 0" style="font-size: 16px;margin-bottom: 5px;color: #333333;" @click.stop="">{{ item.fileName }}</span>
                   
                </div>
                <singlefileUpload style="width:100px" ref="upload" :ruleFormdocFilePath='docForm.docFilePath' @uploadListDel="uploadListDel" @uploadSave="uploadSave" @returnUrl="returnUrl" @uploadListShow="uploadListShow">
                    <template v-slot:openDialog>
                       <el-button style="width: 100px;" plain>上传附件</el-button>
                    </template>
                </singlefileUpload>
            </el-form-item>
            <!--            <el-form-item label="表单模板" prop="formKey">-->
            <!--                <el-select style="width:520px" v-model="manageName" filterable :filter-method="remoteMethodManage" clearable placeholder="请选择表单模板" value-key="formKey" @change="manageClick">-->
            <!--                    <el-option v-for="item in manage" :key="item.formKey" :label="item.formName" :value="item">-->
            <!--                    </el-option>-->
            <!--                </el-select>-->
            <!--            </el-form-item>-->

            <!--            <el-form-item label="流程表单">-->
            <!--                <el-select style="width:520px" v-model="processName" filterable :filter-method="remoteMethodProcess" clearable placeholder="请选择流程表单" value-key="id" @change="processClick">-->
            <!--                    <el-option v-for="item in process" :key="item.id" :label="item.name" :value="item"></el-option>-->
            <!--                </el-select>-->
            <!--            </el-form-item>-->
            <!--            <parser v-if="formData" style="width:70%;margin-left:20px" :form-conf="formData" ref="parser" @submit="submit" />-->
        </el-form>
        <el-button type="primary" style="margin-left: 150px;" @click="onSubmit('form','1')">保存</el-button>
        <!--        <el-button type="primary" style="margin-left: 20px;" @click="startClick('form','2')">保存并提交</el-button>-->
        <el-button style="margin-left: 20px;" @click="cenelClick">取消</el-button>
        <!-- 上传列表 -->
        <!-- <uploadList style="z-index: 99999;" v-if="uploadForm.length > 0 && uploadListType == true" :uploadForm="uploadForm" @uploadListDel="uploadListDel"></uploadList> -->
    </div>
</template>

<script>
import singlefileUpload from "@/components/upload/singlefileUpload";
import { deleteAction, getAction, postAction, putAction } from "@/api/manage";
import { getAction as manageGetAction } from "@/api/manage";
import Parser from "@/components/FormGenerator/components/parser";
import { save, queryId, processStart } from "@/api/doc.js";
import uploadList from "@/components/upload/uploadList.vue";

export default {
    name: "produceupload",
    data() {
        return {
            docForm: {
                name: "",
                content: "",
                docFilePath: [],
                status: "00",
                docType: "02",
                dirId: "",
                docSubtype: "",
                docTypeId: "",
            },
            process: [],
            processName: "",
            manage: [],
            manageName: "",
            formData: "",
            uploadListType: false,
            uploadForm: [],
            switchType: true,
            processLoading: false,
            contractType: "1",
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入文档名称",
                        trigger: "blur",
                    },
                ],
                content: [
                    {
                        required: true,
                        message: "请输入文档描述",
                        trigger: "blur",
                    },
                ],
                modelId: [
                    {
                        required: true,
                        message: "请选择关联流程",
                        trigger: "blur",
                    },
                ],
                formKey: [
                    {
                        required: true,
                        message: "请选择关联表单",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    components: {
        singlefileUpload,
        Parser,
        uploadList,
    },
    created() {
        this.docForm.docSubtype = this.$route.query.docSubtype;
        this.docForm.dirId = this.$route.query.dirId;
        this.docForm.docTypeId = this.$route.query.docTypeId;
        this.processList();
        // this.manageList();
    },
    methods: {
        dirparenIdtchange(data) {
            this.docForm.dirId = data;
        },
        cenelClick() {
            var _this = this;
            _this.$store
                .dispatch("tagsView/delView", _this.$route)
                .then(({ visitedViews }) => {
                    _this.$router.go(-1);
                }); // 关闭当前tab回到列表
        },
        onSubmit(formName, type) {
            var _this = this;
            _this.contractType = type;
            _this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (_this.formData) {
                        _this.$refs.parser.submitForm();
                    } else {
                        save(_this.docForm).then((res) => {
                            _this.$store
                                .dispatch("tagsView/delView", _this.$route)
                                .then(({ visitedViews }) => {
                                    // _this.$router.go(-1);
                                    this.$EventBus.$emit("savemanagement", res);
                                    this.$router.push({
                                        path: "/produce/details",
                                        query: {
                                            prodId: this.$route.query.prodId,
                                        },
                                    });
                                }); // 关闭当前tab回到列表
                        });
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        startClick(docForm, type) {
            var _this = this;
            _this.contractType = type;
            this.$refs[docForm].validate((valid) => {
                if (valid) {
                    // if(utils.isNull(this.docForm.modelId)){ _this.$message.error('请选择审批流程');return;}
                    if (this.formData) {
                        _this.$refs.parser.submitForm();
                    } else {
                        save(_this.docForm).then((res) => {
                            processStart({
                                docId: res.data.docId,
                            }).then(({ msg }) => {
                                _this.$store
                                    .dispatch("tagsView/delView", _this.$route)
                                    .then(({ visitedViews }) => {
                                        this.$EventBus.$emit(
                                            "savemanagement",
                                            msg
                                        );
                                        this.$router.push({
                                            path: "/produce/details",
                                            query: {
                                                prodId: this.$route.query
                                                    .prodId,
                                            },
                                        });
                                    }); // 关闭当前tab回到列表
                            });
                        });
                    }
                }
            });
        },
        submit(data) {
            var _this = this;
            this.docForm.formData = JSON.stringify(data);
            if (_this.contractType == "1") {
                save(_this.docForm).then((res) => {
                    _this.$store
                        .dispatch("tagsView/delView", _this.$route)
                        .then(({ visitedViews }) => {
                            _this.$router.go(-1);
                        }); // 关闭当前tab回到列表
                });
            } else {
                save(_this.docForm).then((res) => {
                    processStart({
                        docId: res.data.docId,
                    }).then(({ msg }) => {
                        _this.$store
                            .dispatch("tagsView/delView", _this.$route)
                            .then(({ visitedViews }) => {
                                _this.$router.go(-1);
                            }); // 关闭当前tab回到列表
                    });
                });
            }
        },
        processList(val) {
            var _this = this;
            var name = "";
            if (val) {
                name = val;
            } else {
                name: "";
            }
            getAction(
                "/flowable/processDefinition/list",
                {
                    processDefinitionName: name,
                },
                false
            ).then((res) => {
                const { data } = res;
                // this.process = data.records
                data.records.forEach((item) => {
                    if (item.category == "WD") {
                        this.process.push(item);
                    }
                });
            });
        },
        processClick(data) {
            console.log(data);
            var _this = this;
            this.processName = data.name;
            this.docForm.modelId = data.id;
            this.docForm.formKey = data.key;
            this.formData = "";
            if (data.key) {
                getAction(
                    "/flowable/form/queryById",
                    {
                        id: data.key,
                    },
                    false
                ).then(({ data }) => {
                    if (data.formJson) {
                        _this.formData = JSON.parse(data.formJson);
                    }
                });
            } else {
                _this.formData = "";
            }
        },
        remoteMethodProcess(data) {
            if (this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(() => {
                this.processList(data);
            }, 500);
        },
        manageList(val) {
            var _this = this;
            var name = "";
            if (val) {
                name = val;
            } else {
                name: "";
            }
            getAction(
                "/flowable/form/list",
                {
                    formName: name,
                    current: 1,
                    size: 10,
                },
                false
            ).then((res) => {
                const { data } = res;
                this.manage = data.records;
            });
        },
        manageClick(data) {
            console.log(data);
            var _this = this;
            this.manageName = data.formName;
            this.docForm.formKey = data.formKey;
            this.formData = data.formJson;
            if (data.formKey) {
                getAction(
                    "/flowable/form/queryById",
                    {
                        id: data.formKey,
                    },
                    false
                ).then(({ data }) => {
                    if (data.formJson) {
                        _this.formData = JSON.parse(data.formJson);
                    }
                });
            }
        },
        remoteMethodManage(data) {
            if (this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(() => {
                this.manageList(data);
            }, 500);
        },
        // 上传附件
        uploadSave(val) {
            let _this = this;
            _this.docForm.docFilePath = _this.uploadForm;
            console.log(_this.docForm.docFilePath);
            _this.$refs.upload.sucessClick();
        },
        uploadListShow(data) {
            this.uploadForm = this.docForm.docFilePath;
            this.uploadListType = data;
        },
        returnUrl(data) {
            var docFilePath = {
                fileName: data.name,
                fileUrl: data.url,
            };
            this.uploadForm.push(docFilePath);
        },
        uploadListDel(data) {
            this.uploadForm.splice(data, 1);
        },
        switchClick(data) {
            if (data == false) {
                this.processName = "";
                this.docForm.modelId = "";
            }
        },
    },
};
</script>
